<script setup lang="ts">
  import useSapCallLogListService from '@/services/module/log/useSapCallLogListService'
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'

  const {
    total,
    sapCallLogList,
    getSapCallLogListParam,
    getSapCallLogListLoading,
    getSapCallLogList,
  } = useSapCallLogListService()

  defineOptions({
    name: 'SapCallLogList',
  })

  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  const getList = async () => {
    if (paginationInstance.value) {
      getSapCallLogListParam.value.page = paginationInstance.value.current
      getSapCallLogListParam.value.size = paginationInstance.value.size
      await getSapCallLogList()
    }
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div v-loading="getSapCallLogListLoading" class="sap-call-log-list-component">
    <div class="table">
      <el-table :border="true" :stripe="true" height="100%" :data="sapCallLogList">
        <!-- 序号 -->
        <el-table-column :width="50" fixed="left" :align="'center'" label="序号" type="index" />

        <!-- 内容 -->
        <el-table-column min-width="240" prop="record" label="内容" />

        <!-- 调用日期 -->
        <el-table-column width="160" prop="date" label="调用日期" />
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        ref="paginationInstance"
        :list_total="total"
        @current-change="getList"
        @size-change="getList"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .sap-call-log-list-component {
    width: 100%;
    height: 100%;
    display: flex;
    row-gap: 12px;
    flex-direction: column;

    .table {
      max-height: calc(100% - 28px - 12px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
